import React, { useState } from "react";
import ReactECharts from "echarts-for-react";
import { useSelector } from "umi";
import { cn } from "@/utils/twMerge";
const PieComponent = () => {
  const laoding = useSelector((state: any) => state.loading);
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  };
  return (
    <div
      className={cn(
        "-z-50 w-full h-[350px] bg-white rounded-md p-4 ",
        laoding.effects["dashboard/getDashboardData"] ? "hidden" : ""
      )}
    >
      <div className="text-xl h-10">员工饼图</div>
      <ReactECharts option={option} />
    </div>
  );
};

export default PieComponent;
